<template>
  <div class="padding-b-20 padding-l-20 padding-r-20 padding-t-20 h-100">
    <opt-bar>
      <div slot="left-bar">组织机构</div>
<!--      <div slot="right-bar">-->
<!--        <a-button class="nbcs-btn-green-bg" @click="edit(2)">新增组织</a-button>-->
<!--      </div>-->
    </opt-bar>
    <div class="orgBox">
      <el-table border :data="tableData" style="width: 100%" row-key="id" lazy ref="tableDom" v-loading="loading" :load="load" :tree-props="{ children: 'children', hasChildren: 'id' }">
        <el-table-column prop="name" label="名称"> </el-table-column>
<!--        <el-table-column prop="address" label="详细地址"> </el-table-column>-->
<!--        <el-table-column width="250" fixed="right" label="操作" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <a-space size="middle">-->
<!--              <a @click="edit(0, scope.row)">新增</a>-->
<!--              <a @click="edit(1, scope.row)">编辑</a>-->
<!--              <a-popconfirm title="确定删除该菜单项?" @confirm="onDelete(scope.row)">-->
<!--                <a class="table-red-btn">删除</a>-->
<!--              </a-popconfirm>-->
<!--            </a-space>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
    <org-struture-edit ref="orgStrutureEdit" @getList="getNewList" />
  </div>
</template>

<script>
import OptBar from '@/layouts/OptBar';
import orgStrutureEdit from './orgStrutureEdit';
import { getOrgByPid, del, getOrgByUser } from '@/services/org';
import { list2Tree } from '@/utils/common';
export default {
  name: 'orgStruture',
  components: {
    OptBar,
    orgStrutureEdit,
  },
  data() {
    return {
      loading: false,
      id: '0',
      maps: new Map(),
      searchForm: {
        name: '',
      },
      tableArr: [],
      tableData: [],
      oldPid: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    load(tree, treeNode, resolve) {
      this.maps.set(tree.id, { tree, treeNode, resolve });
      getOrgByPid({ pid: tree.id }).then((res) => {
        if (res.data.code == 0) {
          resolve(res.data.data);
        }
      });
    },
    getList(params) {
      if (params) {
        getOrgByUser(params).then((res) => {
          if (res.data.code === 0) {
            this.tableArr = [...res.data.data];
            this.tableData = list2Tree(this.tableArr);
            console.log(this.tableData);
            this.loading = false;
          }
        });
      } else {
        this.loading = true;
        getOrgByPid()
          .then((res) => {
            this.loading = false;
            if (res.data.code == 0) {
              this.tableData = res.data.data;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    edit(action, data = {}) {
      console.log(data);
      this.oldPid = data.pid;
      this.$refs['orgStrutureEdit'].show(true, action, data);
    },
    // expand(expanded, record) {
    //   console.log(expanded,record);
    //   if (expanded) {
    //     this.loading = true;
    //     getOrgByPid({ pid: record.id }).then((res) => {
    //       if (res.data.code === 0) {
    //         this.tableArr = [...this.tableArr, ...res.data.data];
    //         list2Tree(this.tableArr);
    //         this.loading = false;
    //       }
    //     });
    //   }
    // },
    //刷新数据
    getNewList(data) {
      console.log(this.oldPid);
      if (data.isEdit && this.oldPid != 0) {
        //编辑可能移动上级组织，刷新原上级组织树
        const { tree, treeNode, resolve } = this.maps.get(this.oldPid);
        this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, tree.id, []);
        //实现数据的重新加载
        this.load(tree, treeNode, resolve);
      }

      //懒加载刷新当前级
      const currentId = data.data.id;
      if (currentId && this.maps.get(currentId)) {
        const { tree, treeNode, resolve } = this.maps.get(currentId);
        this.load(tree, treeNode, resolve);
      }
      //懒加载刷新父级
      const parentId = data.data.pid;
      if (parentId && this.maps.get(parentId)) {
        const { tree, treeNode, resolve } = this.maps.get(parentId);
        this.load(tree, treeNode, resolve);
      }
      //刷新根节点
      if (!this.maps.get(parentId) && !this.maps.get(currentId)) {
        this.getList({ id: this.id });
      }
    },
    onDelete(obj) {
      del({ id: obj.id }).then((res) => {
        if (res.data.code === 0) {
          this.$message.success('删除成功');
          if (obj.pid != '0') {
            console.log('删除1');
            const { tree, treeNode, resolve } = this.maps.get(obj.pid); //根据父级id取出对应的节点数据
            this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, tree.id, []);
            //实现数据的重新加载
            this.load(tree, treeNode, resolve);
          } else {
            console.log('删除2');
            this.getOrgByPid({ id: this.id });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
